<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>this规则二-隐式绑定(This Rule 2- Implicit Binding)</title>
  <!-- 
  在JavaScript中，this 关键字的行为受到多种规则的影响。其中，“隐式绑定”（Implicit Binding）是第二个重要的规则。隐式绑定指的是当一个函数作为对象的方法被调用时，this 的值指向该对象。
  一、隐式绑定的定义
  隐式绑定: 是指当一个函数作为对象的方法调用时，this 的值会自动绑定到调用该方法的对象上。

  二、隐式绑定的实现
  1. 对象方法调用：
    - 当一个函数作为对象的方法被调用时，this 会指向该对象。
    const person = {
      name: 'Alice',
      greet: function() {
        console.log(Hello, my name is ${this.name});
      }
    };

    person.greet(); // 输出: Hello, my name is Alice
  在这个例子中，greet 方法被调用时，this 指向person 对象，因此可以访问person.name 。

  2. 嵌套方法调用：
    - 如果在对象的方法中调用另一个方法，this 仍然指向调用该方法的对象。
    const person = {
      name: 'Alice',
      greet: function() {
        console.log(Hello, my name is ${this.name});
      },
      sayHi: function() {
        this.greet(); // 隐式绑定，this指向person
      }
  };

  person.sayHi(); // 输出: Hello, my name is Alice
  在这个例子中，sayHi 方法调用greet 方法，this 仍然指向person 对象。

  三、隐式绑定的注意事项
  1. 丢失上下文：
    - 如果将对象的方法赋值给一个变量并直接调用该变量，this 的上下文将丢失，变为默认绑定。
    const person = {
      name: 'Alice',
      greet: function() {
        console.log(Hello, my name is ${this.name});
      }
    };

    const greetFunc = person.greet;
    greetFunc(); // 输出: Hello, my name is undefined (在非严格模式下，this指向window)
  在这个例子中，greetFunc 不再是person 对象的方法，因此this 指向全局对象或undefined （在严格模式下）。

  2. 箭头函数：
    - 箭头函数不使用隐式绑定，它会捕获定义时的this 值，因此在箭头函数中，this 的值与外部上下文相同。
    const person = {
      name: 'Alice',
      greet: function() {
        const arrowFunc = () => {
          console.log(Hello, my name is ${this.name});
        };
        arrowFunc(); // this指向person
      }
    };

    person.greet(); // 输出: Hello, my name is Alice

  四、总结
  - 隐式绑定是指当一个函数作为对象的方法调用时，this 的值指向该对象。
  - 在对象的方法中调用其他方法时，this 仍然指向该对象。
  - 注意在将方法赋值给变量时，this 的上下文可能会丢失。
  - 箭头函数不会使用隐式绑定，它会捕获外部上下文的this 值。
   -->
</head>
<body>

  <script>
    // 1. 隐式绑定
    const person = {
      name: 'Alice',
      sayHi: function() {
        console.log(`Hello, my name is ${this.name}`);
      }
    };

    person.sayHi(); // 输出: Hello, my name is Alice

    // 2. 函数中调用其他对象
    function implicit() {
      console.log("implici函数: ", this);
    }
    const obj = {
      bar: implicit,
    }

    obj.bar()
    
    
  </script>
  
</body>
</html>